<template>
  <view>
    <view class="search-box">
      <uni-search-bar @confirm="myconfirm" radius="100" cancelButton='none' @input="input"></uni-search-bar>
      <!-- 搜索建议列表 -->
      <view class="searchSuggest" v-if="searchResult.length > 0">
        <view @click="toDetail(item.goods_id)" class="suggest-item" v-for="(item, index) in searchResult" :key="index">
          <view class="text">{{ item.goods_name }}</view>
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </view>
      <!-- 搜索历史 -->
      <view class="history" v-else>
        <view class="top">
          <view class="word">
            搜索历史
          </view>
          <uni-icons @click="removeList" type="trash-filled" size="20"></uni-icons>
        </view>
        <view class="item">
          <view @click="toGoodsList(item)" class="hisitem" v-for="(item, index) in histList" :key="index">
            {{ item }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 延时器
        timer: 0,
        // 输入的关键字
        key: '',
        // 保存搜索建议
        searchResult: [],
        // 搜索历史
        histList: ['a', 'b', 'c']
      };
    },
    methods: {
      // 跳转到商品列表页面
      toGoodsList(key) {
        uni.navigateTo({
          url: `/pages/goods_list/goods_list?query=${key}`
        })
      },
      removeList() {
        uni.removeStorageSync('hist')
        // 清除 hisList
        this.histList = []
        // 提示
        uni.showToast({
          icon: "success",
          title: '删除成功'
        })
      },
      onLoad() {
        // 得到遍历数据
        this.histList = uni.getStorageSync('hist') || []
      },
      // 保存历史记录到本地
      saveStorage() {
        uni.setStorageSync('hist', this.histList)
      },
      // 点击回车会触发
      myconfirm(e) {
        console.log('myconfirm')
        // 将搜索历史记录保存起来
        this.histList.unshift(e.value)
        // 数组的去重
        const mySet = new Set(this.histList)
        // 将新得到的数组赋值给历史记录
        this.histList = [...mySet]
        // 将历史记录保存到本地
        this.saveStorage()
        // 跳转到商品列表页面中
        uni.navigateTo({
          url: `/pages/goods_list/goods_list?query=${e.value}`
        })
      },
      input(e) {
        // console.log(e.value);
        // 防抖，防止输入框一直输入内容
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.key = e
          this.getSearchResult()
        }, 500)
      },
      async getSearchResult() {
        // 判断搜索关键字是否为空
        if (this.key === '') return uni.$showMsg('搜索关键字不能为空！')
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', {
          query: this.key
        })
        // console.log(res);
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResult = res.message.goods
      },
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/goods_detail/main?goods_id=${id}`
        })
      },
    }
  }
</script>

<style lang="scss">
  .searchBox {
    .search-item {
      background-color: #c00000;
      position: sticky;
      top: 0;
      z-index: 999;

      .uni-searchbar__box {
        justify-content: left;
      }
    }


  }

  .searchSuggest {
    padding: 10px;

    .suggest-item {
      display: flex;

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        font-size: 12px;
        line-height: 30px;
      }
    }
  }

  .history {
    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }

    .item {
      display: flex;

      .hisitem {
        background-color: #eee;
        margin: 10px;
        padding: 2px 10px;
      }
    }
  }
</style>
